<!-- 页脚 -->
<footer class="bg-dark text-white pt-16 pb-8">
    <div class="container mx-auto px-4 md:px-6">
        <!-- 添加 hidden 类在移动端隐藏，md:grid 在中等屏幕恢复网格布局 -->
        <div class="hidden md:grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
            <div class="lg:col-span-2">
                <div class="flex items-center space-x-2 mb-6">
                    <div class="w-10 h-10 rounded-lg gradient-bg flex items-center justify-center text-white">
                        <i class="fa-solid fa-link text-xl"></i>
                    </div>
                    <span class="text-xl font-bold text-white">{{admin_setting('name')}}</span>
                </div>
                <p class="text-gray-400 mb-6 max-w-md">
                   {{admin_setting('description')}}
                </p>
                <div class="flex space-x-4">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa-brands fa-twitter text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa-brands fa-facebook text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa-brands fa-instagram text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa-brands fa-linkedin text-xl"></i>
                    </a>
                </div>
            </div>
            
            <div>
                <h4 class="text-lg font-medium mb-4">产品</h4>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">功能</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">价格</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">安全</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">集成</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">更新日志</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-lg font-medium mb-4">资源</h4>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教程</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API 文档</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">社区</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">博客</a></li>
                </ul>
            </div>
            
            <div>
                <h4 class="text-lg font-medium mb-4">公司</h4>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">招贤纳士</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors">服务条款</a></li>
                </ul>
            </div>
        </div>
        
        <div class="border-t border-gray-800 pt-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 mb-4 md:mb-0">
                    &copy; 2025 MFPad. 保留所有权利。
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-500 hover:text-white transition-colors">服务条款</a>
                    <a href="#" class="text-gray-500 hover:text-white transition-colors">Cookie 设置</a>
                </div>
            </div>
        </div>
    </div>
</footer>

<script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
            navbar.classList.add('py-2', 'shadow-md');
            navbar.classList.remove('py-3', 'shadow-sm');
        } else {
            navbar.classList.add('py-3', 'shadow-sm');
            navbar.classList.remove('py-2', 'shadow-md');
        }
    });
    
    // 移动端菜单
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
        const icon = menuBtn.querySelector('i');
        if (mobileMenu.classList.contains('hidden')) {
            icon.classList.remove('fa-times');
            icon.classList.add('fa-bars');
        } else {
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-times');
        }
    });
    
    // FAQ 折叠面板
    const faqToggles = document.querySelectorAll('.faq-toggle');
    faqToggles.forEach(toggle => {
        toggle.addEventListener('click', () => {
            const content = toggle.nextElementSibling;
            const icon = toggle.querySelector('i');
            
            content.classList.toggle('hidden');
            if (!content.classList.contains('hidden')) {
                icon.classList.add('rotate-180');
            } else {
                icon.classList.remove('rotate-180');
            }
        });
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80,
                    behavior: 'smooth'
                });
                
                // 关闭移动端菜单
                if (!mobileMenu.classList.contains('hidden')) {
                    mobileMenu.classList.add('hidden');
                    const icon = menuBtn.querySelector('i');
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }
        });
    });
</script>
</body>
</html>
